import { observer } from 'mobx-react'
import React from 'react'
import type { PopconfirmProps } from 'antd'
import { Layout, Input, Tree, Button, Form, Select, Table, Row, Col, DatePicker, Popconfirm, message } from 'antd'
import type { DataNode } from 'antd/es/tree'
import { useNavigate } from 'react-router-dom'

const { Sider, Content } = Layout
const { RangePicker } = DatePicker
const treeData: DataNode[] = [
  {
    title: '开发部门',
    key: '0',
    children: [
      { title: '后端开发部', key: '0-0' },
      { title: 'JAVA开发部', key: '0-1' },
      { title: '前端开发部', key: '0-2' },
    ],
  },
]

const SearchForm: React.FC = () => {
  const onFinish = (values: any) => {
    console.log('提交的搜索条件：', values)
  }

  return (
    <div className="filterForm">
      <Form
        layout="inline"
        onFinish={onFinish}
      >
            <Form.Item label="部门名称" name="username">
              <Input placeholder="请输入部门名称" />
            </Form.Item>
            <Form.Item label="上级部门" name="post">
              <Select placeholder="全部">
                <Select.Option value="">全部</Select.Option>
                <Select.Option value="财务">财务</Select.Option>
                <Select.Option value="运营">运营</Select.Option>
                <Select.Option value="开发">开发</Select.Option>
              </Select>
            </Form.Item>
            <Form.Item label="操作人" name="operator">
              <Input placeholder="请输入操作人账号" />
            </Form.Item>
            <Form.Item label="操作时间" name="time">
              <RangePicker placeholder={['开始日期', '结束日期']} />
            </Form.Item>
      </Form>

        <div className="rightAction">
          <Button type="primary" htmlType="submit">
            查询
          </Button>
          <Button>
            重置
          </Button>
        </div>
    </div>
  )
}

const DepartmentManagement: React.FC = () => {
  const [treeSelectKeys, setTreeSelectKeys] = React.useState<string[]>([])
  const navigate = useNavigate()

  const onTreeSelect = (selectedKeys: React.Key[]) => {
    setTreeSelectKeys(selectedKeys as string[])
    // 根据选中的部门 key，去刷新右侧表格数据
  }

  const onSearchDept = (value: string) => {
    // 搜索部门名称
  }

  const handleResetPassword = (record: any) => {
    console.log(record, 'record')
  }
  const handleEdit = (record: any) => {
    console.log(record, 'record')
  }

  const handleEnable = (record: any) => {
    console.log(record, 'record')
  }

  const handleDisable = (record: any) => {
    console.log(record, 'record')
  }
  const handleDelete = (record: any) => {
    console.log(record, 'record')
  }

  // 新增按钮
  const handleCreate = () => {
    navigate('/setting/enterpriseManagement/departmentManagement/add')
  }
  const handleConfirm: PopconfirmProps['onConfirm'] = (e) => {
    console.log(e)
    message.success('点击确定')
  }
  const handleCancel: PopconfirmProps['onCancel'] = (e) => {
    console.log(e)
    message.error('点击取消')
  }

  return (
    <div className='OP7-sub-layout-L-R'>
    <Sider
        width={300}
        className='OP7-left'
      >
        <Input.Search
          className='custom-input'
          placeholder="请输入部门名称"
          onSearch={onSearchDept}
          style={{ marginBottom: 16, background: '#f2f3f5' }}
        />
        {/* 部门树 */}
        <Tree
          treeData={treeData}
          onSelect={onTreeSelect}
          defaultExpandAll
        />
      </Sider>
      <div className="app-container">
        {/* 左侧侧边栏 */}
        {/* 右侧主区域 */}
          {/* 查询条件区域 */}
          <SearchForm />
          <div>
            <Button type="primary" onClick={handleCreate}>
              + 新增
            </Button>
          </div>

          <Table
            columns={[
              { title: '序号', dataIndex: 'index' },
              { title: '部门名称', dataIndex: 'username' },
              { title: '上级部门', dataIndex: 'position' },
              { title: '排序', dataIndex: 'role' },
              { title: '状态', dataIndex: 'role' },
              { title: '部门描述', dataIndex: 'role' },
              { title: '操作人', dataIndex: 'role' },
              { title: '操作时间', dataIndex: 'role' },
              {
                title: '操作',
                width: 200,
                fixed: 'right',
                render: (text, record: any) => (
                  <div className='table-cell-actions'>
                    <Button type="link" onClick={() => handleResetPassword(record)}>密码</Button>
                    <Button type="link" onClick={() => handleEdit(record)}>修改</Button>
                    {record.status === '禁用' ? (
                      <Button type="link" onClick={() => handleEnable(record)}>
                        启用
                      </Button>
                    ) : (
                      <Button type="link" onClick={() => handleDisable(record)}>
                        禁用
                      </Button>
                    )}
                    <Popconfirm
                      key="delete"
                      placement="topRight"
                      title="确定要删除吗?"
                      onConfirm={handleConfirm}
                      onCancel={handleCancel}
                      okText="确定"
                      okType="danger"
                      cancelText="取消"
                    >
                      <Button
                        type="link"
                        danger
                        key="delete"
                      >
                        删除
                      </Button>
                    </Popconfirm>
                  </div>
                ),
              },
            ]}
            dataSource={[
              { index: 1, username: 'admin', name: '万大', position: '部门负责人', role: '管理员' },
              { index: 2, username: 'admin1', name: '万大', position: '部门负责人1', role: '超级管理员1' },
            ]}
            rowKey="index"
            tableLayout="fixed"
            scroll={{ x: 1200 }}
          />
      </div>
    </div>
  )
}

export default observer(DepartmentManagement)